 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-col :span="4">
                    <el-input v-model="search.name" placeholder="请输入优惠券名称"></el-input>
                </el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form>
            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品名称">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="所属店铺">
                                <span>{{ props.row.shopId }}</span>
                            </el-form-item>
                            <el-form-item label="金额">
                                <span>{{ props.row.value }}</span>
                            </el-form-item>
                            <el-form-item label=""></el-form-item>
                            <el-form-item label="满减金额">
                                <span>满：{{ props.row.originCondition }} 减 {{ props.row.denominations }}</span>
                            </el-form-item>
                            <el-form-item label="折扣">
                                <span>{{ props.row.discount }} 折</span>
                            </el-form-item>
                            <el-form-item label="开始时间">
                                <span>{{ props.row.startTime }}</span>
                            </el-form-item>
                            <el-form-item label="结束时间">
                                <span>{{ props.row.endTime }}</span>
                            </el-form-item>
                            <el-form-item label="可领取日期" >
                                <span>{{ props.row.enableTime }}</span>
                            </el-form-item>
                            <el-form-item label="已领取数量" >
                                <span>{{ props.row.receiveCount }}</span>
                            </el-form-item>
                            <el-form-item label="已使用数量" >
                                <span>{{ props.row.useCount }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#" sortable/>
                <el-table-column label="优惠码" width="100px">
                    <template slot-scope="scope">
                        <vue-qr
                            :text="scope.row.code"
                            logoSrc="https://ts1.cn.mm.bing.net/th/id/R-C.285aef8f9ed45dbee45a5307b1ee6e1c?rik=Jp9gwXm1vDRz2g&riu=http%3a%2f%2fi2.hdslb.com%2fbfs%2farchive%2fab57564bea8a16ca1551c384e38b7bb9e92cedc6.jpg&ehk=5T51tgEZ0AFChxN8PYVOc2c7fhVO89qdFeLXYKzls2A%3d&risl=&pid=ImgRaw&r=0"
                            :size="100"></vue-qr>
                        <el-link type="text" :underline="false" style="margin-left: 20px">{{scope.row.code}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="优惠券名称" width="200px"> </el-table-column>
                <el-table-column prop="type" label="优惠券类型" :formatter="getTypeName"></el-table-column>
                <el-table-column prop="shopId" label="使用店铺" :formatter="getShopName"></el-table-column>
<!--                <el-table-column prop="shopId" label="使用店铺"  ></el-table-column>-->
                <el-table-column prop="platform" label="使用平台"  :formatter="getPlatformName"> </el-table-column>
<!--                <el-table-column prop="count" label="发放数量" > </el-table-column>-->
                <el-table-column prop="perLimit" label="每人限领" ></el-table-column>
                <el-table-column prop="minPoint" label="使用门槛" :formatter="getStatusName"> </el-table-column>
                <el-table-column prop="publishCount" label="发行数量" ></el-table-column>
<!--                <el-table-column prop="receiveCount" label="已领取数量" > </el-table-column>-->
<!--                <el-table-column prop="useCount" label="已使用数量" > </el-table-column>-->
<!--                <el-table-column prop="enableTime" label="可领取日期" > </el-table-column>-->
                <el-table-column prop="code" label="优惠码" > </el-table-column>
                <el-table-column prop="useType" label="可使用类型" :formatter="getUseTypeName"> </el-table-column>
                <el-table-column prop="description" label="备注" width="200px"> </el-table-column>
                <el-table-column label="操作" width="200px" >
                    <template slot-scope="scope">
                        <el-button size="small" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="text">编辑</el-button>
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            <!--新增/修改 Form -->
            <el-dialog title="优惠券管理" :visible.sync="editInfoState">
                <el-form :model="formInfo">
                    <el-form-item label="优惠券名称" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.name" placeholder="优惠券名称" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠码" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.code" placeholder="优惠券码：如：100003" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="店面名称" :label-width="formLabelWidth">
<!--                        <el-input v-model="formInfo.shopId" placeholder="店面名称" auto-complete="off"></el-input>-->
                        <el-select v-model="formInfo.shopId" placeholder="请选择" style="width: 100%;" @change="getOtherAll(formInfo.shopId)">
                            <el-option
                                    v-for="item in shopType"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                {{ item.name }} - {{ item.address }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠劵类型" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.type" placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in couponType"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                {{ item.name }} - {{ item.remark }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="使用平台" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.platform" placeholder="请选择" style="width: 100%">
                            <el-option :key="0" label="全部" :value="0"></el-option>
                            <el-option :key="1" label="移动" :value="1"></el-option>
                            <el-option :key="2" label="PC" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="满减" :label-width="formLabelWidth">
                        满  <el-input v-model="formInfo.originCondition" placeholder="满减额度" auto-complete="off" style="width: 45%"></el-input>
                        减  <el-input v-model="formInfo.denominations" placeholder="满减金额" auto-complete="off" style="width: 45%"></el-input>
                    </el-form-item>


                    <el-form-item label="折扣" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.discount" placeholder="折扣" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="金额" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.amount" placeholder="金额" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发行数量" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.publishCount" placeholder="发行数量" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="每人限领张数" :label-width="formLabelWidth">
<!--                        <el-input-number v-model="formInfo.perLimit" label="描述文字"></el-input-number>-->
                        <el-input v-model="formInfo.perLimit" placeholder="每人限领张数" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="使用门槛" :label-width="formLabelWidth">
                        <el-radio v-model="formInfo.minPoint" :label="0">无门槛</el-radio>
                        <el-radio v-model="formInfo.minPoint" :label="1">指定门槛</el-radio>
                    </el-form-item>
                    <el-form-item label="使用类型" :label-width="formLabelWidth" v-if="formInfo.minPoint === 1">
                        <el-radio v-model="formInfo.useType" :label="0" :disabled="formInfo.minPoint === 1">全场通用</el-radio>
                        <el-radio v-model="formInfo.useType" :disabled="formInfo.minPoint === 0" :label="1">指定分类</el-radio>
                        <el-radio v-model="formInfo.useType" :disabled="formInfo.minPoint === 0" :label="2">指定车辆</el-radio>
                    </el-form-item>

                    <el-form-item label="指定类型" :label-width="formLabelWidth"  v-if="formInfo.useType === 1">
                        <el-checkbox-group label="指定类型" v-model="typeId" :label-width="formLabelWidth">

                            <el-checkbox :label="brand.id" v-for="brand in brandList">{{brand.name}}</el-checkbox>

                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="指定车辆" :label-width="formLabelWidth"  v-if="formInfo.useType === 2">
                        <el-checkbox-group label="指定车辆"  v-model="carId" :label-width="formLabelWidth" >
                            <el-checkbox :label="car.id" v-for="car in carList">{{car.carName}} - {{car.vin}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="使用平台" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.platform" placeholder="请选择" style="width: 100%">
                            <el-option :key="0" label="全部" :value="0"></el-option>
                            <el-option :key="1" label="移动" :value="1"></el-option>
                            <el-option :key="2" label="PC" :value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.description" placeholder="备注" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="优惠劵领取时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="formInfo.enableTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="优惠劵领取时间" style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="优惠使用时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="formInfo.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="开始时间" style="width: 40%"/>
                        到<el-date-picker v-model="formInfo.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="结束时间" style="width: 40%"/>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editInfoState = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import vueQr from 'vue-qr'
Vue.use(VueAxios, axios);

export default {
    components: {
        vueQr
    },
    data() {
        return {
            tableData: [],
            powerData: [],
            treeData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            formInfo: {},
            search: {},
            brandList:[],
            carList:[],
            typeId:[],
            carId:[],
            shopType:[],
            couponType:[],
            formLabelWidth: '120px',
            editInfoState: false,
        };
    },
    created() {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            //页面初始化时，加载的方法
            this.$http.post('/coupon/api/'+this.pageNum +'/'+this.pageSize, this.search).then((response) => {
                    this.tableData = response.data.data.records;
                    this.total = response.data.data.total;
                });
            this.$http.get('/coupon/api/couponType/findAll').then(resp => {
                this.couponType = resp.data.data;
            })

            this.$http.get('/coupon/api/shopAll').then(resp => {
                this.shopType = resp.data.data;
            })

        },
        getOtherAll(shopId){
            this.$http.get('/coupon/api/shopAll/' + shopId).then(resp => {
                this.carList = resp.data.data.carList;
                this.brandList = resp.data.data.brandList;
            })
        },
        addBtn() {
            this.formInfo = {};
            this.editInfoState = true;
        },
        updateInfo: function (index, row) {
            this.formInfo = row;
            this.editInfoState = true;
        },
        saveInfo: function () {

            if (m === 0){this.formInfo.minPoint = 0}
            let m = this.formInfo.useType
            if (m === 1){this.formInfo.typeId = this.typeId.toString()}
            else if (m === 2){this.formInfo.carId = this.carId.toString()}

            console.log(this.formInfo)


            var _this = this;
            if (_this.formInfo.id !== null && _this.formInfo.id !== '' && _this.formInfo.id !== undefined) {
                axios.put('/coupon/api', _this.formInfo).then(function (response) {
                        if(response.data.code===200){
                            //提示成功
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            //正确请求时，回调函数
                            console.log(response);
                            _this.load();
                            _this.editInfoState = false;
                        }

                    }).catch(function (error) {
                         _this.$message.error('你错了。。。');
                        _this.editInfoState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            } else {
                axios.post('/coupon/api', _this.formInfo).then(function (response) {
                        //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                });
                        //正确请求时，回调函数
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                         _this.$message.error('你错了。。。');
                        //失败处理
                        console.log(error);
                    });
            }
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    var _this = this;
                    var idList = [row.id]
                    axios.delete('/coupon/api', {data: idList}).then(function (response) {
                            if (response.data.code === 200) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

        },

        getStatusName(row, column, cellValue) {
            return cellValue === 1 ? '是' : '否';
        },

        getShopName(row, column, cellValue){
            // 优惠卷类型；0->全场赠券；1->会员赠券；2->消费赠券；3->注册赠券
            var tmpType = '';
            var types = this.shopType
            for(var i = 0;i < types.length;i++){
                console.log(types[i],types[i].name)
                if (cellValue === types[i].id) {
                    tmpType = types[i].name;
                }
            }
            return tmpType;
        },

        getTypeName(row, column, cellValue) {
            var tmpType = '';
            var types = this.couponType
            for(var i = 0;i < types.length;i++){
                if (cellValue === types[i].id) {
                    tmpType = types[i].name;
                }
            }
            return tmpType;
        },

        getPlatformName(row, column, cellValue) {
            // 0->全部；1->移动；2->PC
            var tmpType = '';
            if (cellValue === 0) {tmpType = '全部';
            } else if (cellValue === 1) {tmpType = '移动';
            } else if (cellValue === 2) {tmpType = 'PC';}
            return tmpType;
        },

        getUseTypeName(row, column, cellValue) {
            // 使用类型：0->全场通用；1->指定分类；2->指定车辆
            var tmpType = '';
            if (cellValue === 0) {tmpType = '全场通用';
            } else if (cellValue === 1) {
                tmpType = '指定分类';
            } else if (cellValue === 2) {tmpType = '指定车辆';}
            return tmpType;
        },

        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },

        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        //刷新
        emptyBtn() {
            this.search = {};
            this.pageNum = 1;
            this.pageSize = 5;
            this.load();
        },
    }
};
</script>
<style>
    .demo-table-expand {
        font-size: 24px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-left: 100px;
        margin-bottom: 0;
        width: 40%;
    }
</style>
